<template>
  <div class="welcome">
    <n-card class="navbar"
      ><b>Spring Authorization Server 前后端分离示例项目</b></n-card
    >
    <n-space class="features">
      <n-card title="登录页面" @click="pathRoute('/login')" hoverable>
        /login
      </n-card>
      <n-card title="授权确认页面" @click="pathRoute('/consent')" hoverable>
        /consent</n-card
      >
      <n-card title="设备码验证页面" @click="pathRoute('/activate')" hoverable>
        /activate</n-card
      >
      <n-card title="验证成功页面" @click="pathRoute('/activated')" hoverable>
        /activated
      </n-card>
      <br />
      <n-card
        title="授权码模式"
        @click="pathRoute('/OAuth2Redirect')"
        hoverable
      >
        发起授权码模式的授权申请
      </n-card>
      <n-card title="PKCE模式" @click="pathRoute('/PkceRedirect')" hoverable>
        发起PKCE模式的授权申请
      </n-card>
      <n-card title="Token展示" hoverable v-if="accessToken">
        <n-table :single-line="false">
          <thead>
            <tr>
              <th style="width: 110px">Key</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(v, k) in accessToken" :key="k">
              <td>{{ k }}</td>
              <td>{{ v }}</td>
            </tr>
          </tbody>
        </n-table>
      </n-card>
    </n-space>
  </div>
</template>

<script setup lang="ts">
import router from '../../router'
// import { createDiscreteApi } from 'naive-ui'

// const { message } = createDiscreteApi(['message'])
// 从缓存中获取token
const accessToken = JSON.parse(String(localStorage.getItem('accessToken')))

/**
 * 根据路径跳转路由
 * @param path 路由路径
 */
const pathRoute = (path: string) => {
  router.push({ path })
}
</script>

<style scoped>
.welcome {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.features {
  padding: 8px;
}
.features div {
  cursor: pointer;
}
</style>
